<template>
  <div class="list"  ref="wrapper">
     <div >
        <div class="area">
            <div class="title border-bottom">
                当前城市
            </div>
            <div class="button-list">
                <div class="button-wrapper">
                    <div class="button-content">北京</div>
                </div>
            </div>
        </div>
        <div class="area">
            <div class="title border-bottom">热门城市</div>
            <div class="button-list">
                <div class="button-wrapper" v-for="(city,index) of hotCities" :key="index">
                    <div class="button-content">{{city.name}}</div>
                </div>
            </div>
        </div>
        <div class="area" v-for="(item,key) of allCities" :key="key" :ref="key">
            <div class="title border-bottom">{{key}}</div>
            <div class="item-list">
                <div class="item-wrapper" v-for="(city,index) of item" :key="index">
                    <div class="item-content border-bottom">{{city.name}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    name:"CityList",
    props:{
        hotCities:Array,
        allCities:Object,
        letter:String
    },
    mounted(){
        this.scroll = new BScroll(this.$refs.wrapper)
    },
    watch:{
        letter(){
            const el = this.$refs[this.letter][0];
            if(el){
               this.scroll.scrollToElement(el)
            }
          
        }
    }
};
</script>
<style lang="scss" scoped>
@import "~style/public";
.border-bottom {
  &:before {
    border-color: #ccc;
  }
  &:after {
    border-color: #ccc;
  }
}
.list {
   position: absolute;
   top: 1.78rem;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
  .area {
    .title {
      line-height: 0.4rem;
      background: #eee;
      padding: 0.1rem;
    }

    .button-list {
      background: #ffffff;
      overflow: hidden;
      padding: 0.1rem;
      .button-wrapper {
        width: 29.9%;
        float: left;
        height: 0.6rem;
        line-height: 0.6rem;
        margin: 0.1rem 1%;
        .button-content {
          padding: 0.001rem 0rem;
          border: 0.01rem solid #666;
          border-radius: 0.1rem;
          text-align: center;
        }
      }
    }
    .item-list {
      box-sizing: border-box;
      padding: 0rem 0.2rem;
      .item-wrapper {
        line-height: 0.64rem;
        height: 0.64rem;
        &:before {
          border-color: #ccc;
        }
        &:after {
          border-color: #ccc;
        }
      }
    }
  }
}
</style>
